<!DOCTYPE html>
<html>
<head>
	<title>zane 的日历插件</title>
	<meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
	<style>
		*{padding:0;margin:0;}
		input{
			outline:none;
		}
		body{
			background: #eee;
		}
		.line{
			overflow: hidden;
		}
		.navdemo{
			overflow: hidden;
			height: 100px;
			line-height: 100px;
			background: #27ae60;
		}
		.navdemo li{
			float: left;
			width: 150px;
			text-align: center;
			font-size: 18px;
		}
		.navdemo ul{
			width: 1000px;
			margin: 0 auto;
		}
		.msg-text{
			margin-top: 20px;
			padding: 10px 20px;
			font-size: 14px;
			background: #efdede;
			color: #000;
		}
		a{
			text-decoration: none;
			color: #fff;
		}
		.h1{
			font-size: 22px;
			margin: 30px 0;
		}
		.main{
			width: 1000px;
			margin: 0 auto;
			overflow: hidden;
			padding-bottom: 250px;
		}
		.main .demo{
			float: left;
			width: 48%;
			overflow: hidden;
			font-size: 16px;
			margin: 40px 0;
		}
		.main .demo span.t1{
			display: inline-block;
			width: 110px;
			font-size: 13px;
		}
		.main .demo .button{
			width: 40px;
			padding: 7px 10px;
			background: #42bf77;
			color: #fff;
			text-align: center;
			cursor: pointer;
			font-size: 14px;
			border-radius: 3px;
		}
		.main .demo .input{
			height: 35px;
			line-height: 35px;
			padding-left: 10px;
			width: 250px;
			margin-left: 10px;
			border: solid 1px #ddd;
			background: #fff;
			display: inline-block;
		}
		.h2{
			font-size: 18px;
			width: 100%;
			overflow: hidden;
			clear: both;
			margin-top: 40px;
			color: #000;
			border-bottom: solid 1px #ddd;
			background: #9deeff;
		    color: #000;
		    line-height: 40px;
		    padding: 0 15px;
		}
		.block{
			overflow: hidden;
		}
		.every-code{
			display: none;
			position: relative;
			z-index: 10000;
			/*max-width: 650px;*/
		}
		.every-code{
			z-index: 10!important;
		}
	</style>
	<style type="text/css">
		.position_flexd{width:600px;height:200px;position:fixed;left:30%;top:50px;background:#fff;padding-top:30px;display:none;z-index:11;}
		.position_fix{margin-left:50px;}
		.position_absolute{position:absolute;left:50px;top:150px;background:#fff;}
		.close{width:20px;height:20px;position:absolute;right:20px;top:20px;cursor:pointer;font-size:30px;}
		div.button-zane{padding:8px 15px;border:none;background:#42bf77;font-size:16px;color:#fff;cursor:pointer;display:inline-block;margin-top:20px;}
		.title h1{font-size:16px;font-weight:400;margin-top:10px;}
		.title-h1{font-size:16px;margin-top:10px;font-weight:bold;}
	</style>
	<link rel="stylesheet" type="text/css" href="./css/zane-calendar.css">
	<link href="https://cdn.bootcss.com/prism/1.9.0/themes/prism-tomorrow.min.css" rel="stylesheet">
	<script src="./es6/zane-calendar.js"></script>
</head>
<body>
	<ul class="navdemo">
		<ul>
			<li><a target="_blank" href="http://blog.seosiwei.com/">我的博客</a></li>
			<li><a target="_blank" href="https://github.com/wangweianger/zane-data-time-calendar">github</a></li>
			<li><a target="_blank" href="https://www.npmjs.com/package/zane-calendar">npm</a></li>
		</ul>
	</ul>
	<div class="main">
		<div class="msg-text">zaneData是一个完全由原生javascript封装的PC端日历插件，不依赖任何第三方插件，功能全面，使用简单.</div>
		<div class="title">
			<div class="english h2">使用方式</div>
<div class="title-h1">浏览器端使用</div>
<div class="every-code" style="display:block"><pre>
<code class="language-js">&lt;!-- 引入相应的js和css --&gt;
&lt;link href="./dist/zane-calendar.min.css"&gt;
&lt;script src="./dist/zane-calendar.min.js"&gt;&lt;/script&gt;

&lt;!-- 需要加时间插件的输入框 --&gt;
&lt;input type="" name="" id="zane-calendar"&gt;

初始化
zaneDate({
	elem:'#zane-calendar',
})
</code></pre></div></div>
<div class="title-h1">Webpack 使用</div>
<div class="every-code" style="display:block"><pre>
<code class="language-js">&lt;!-- 安装依赖 --&gt;
npm install zane-calendar --save-dev

const zaneDate = require('zane-calendar') 或
import zaneDate from 'zane-calendar'

&lt;!-- 需要加时间插件的输入框 --&gt;
&lt;input type="" name="" id="zane-calendar"&gt;

初始化
zaneDate({
	elem:'#zane-calendar',
})
</code></pre></div>

<div class="title-h1">所有参数说明(组合随意)</div>
<div class="every-code" style="display:block"><pre>
<code class="language-js">{
	elem:'#zane-calendar',  控件的dom原生 注意：仅限制于id选择器（必填参，其他参数皆为可选参）
	type:'day',   			可选类型 day year month time doubleday doubleyear doublemonth doubletime
	lang:'cn',   			可选择语言类型 cn , en 
	width:280,  			插件宽度配置   250 <= X <= 500
	height:300, 			插件高度配置   250 <= X <= 350
	behindTop:10,   		插件与输入框的距离
	format:'yyyy-MM-dd HH:mm:ss',  时间格式化
	begintime:'',  			开始时间  （单选择器默认选择此项）
	endtime:'',             结束时间  （double选择器需要）
	min:'',  				可选取时间最小范围 1900-10-01
	max: '',  				可选取时间最大范围 2099-12-31
	position:'fixed',  		定位方式  暂时只支持 fixed
	event:'click',   		事件方式 暂时只支持 click 
	zindex:100,   			z-index值
	showtime:true,  		是否显示选择时间
	showclean:true,  		是否显示清除按钮
	shownow:true,  			是否显示当前按钮
	showsubmit:true, 		是否显示提交按钮
	haveBotBtns:true, 		是否有底部按钮列表
	mounted:()=>{}, 		插件加载完成之后调用
	change:(fulltime,begintime,endtime)=>{}, 时间变更之后调用
	done:(fulltime,begintime,endtime)=>{},   选择完成之后调用
}</code></pre></div>

		<div class="english h2">承载元素</div>
		<div class="block">
			<div class="demo">
				<span class="t1">INPUT框:</span><input id="demo20" type="text" class="input" placeholder="我是input框">
				<span class="button">代码</span>
<div class="every-code"><pre><code class="language-js">zaneDate({ 
	elem:'#demo20', 
	showtime:false, 
})</code></pre></div>
			</div>
			<div class="demo">
				<span class="t1">DIV框:</span><div class="input" id="demo19">我是div框</div>
				<span class="button">代码</span>
<div class="every-code"><pre><code class="language-js">zaneDate({
	elem:'#demo19',
	showtime:false,
	begintime:'2018-01-01',
})</code></pre></div>
			</div>
		</div>

		<div class="english h2">绝对定位</div>
		<div class="button-zane">显示绝对定位日期</div>
		<div class="position_flexd demo" id="open_model" style="width:600px;height:400px;">
			<div class="position_fix">
				<div>fixed绝对定位:</div>
				<input id="demo28" type="text" class="input" placeholder="我是input框">
				<span class="button">代码</span>
<div class="every-code"><pre><code class="language-js">zaneDate({
	elem:'#demo28',
	type:'doubleday',
	format:'yyyy-MM-dd HH:mm:ss',
	showtime:true,
})</code></pre></div>
			</div>
			<div class="position_absolute">
				<div>绝对定位中的absolute定位:</div>
				<input id="demo29" type="text" class="input" placeholder="我是input框">
				<span class="button">代码</span>
<div class="every-code"><pre><code class="language-js">zaneDate({
	elem:'#demo29',
})</code></pre></div>
			</div>
			<div class="close" onclick="closeModel()">x</div>
		</div>

		<div class="english h2">中文版案例 (以下所有功能均适用于英文版)</div>
		<div class="line">
		<div class="demo">
			<span class="t1">完整版:</span>
			<input id="demo3" type="text" class="input" placeholder="yyyy-MM-dd HH:mm:ss">
			<span class="button">代码</span>
<div class="every-code"><pre><code class="language-js">zaneDate({
	elem:'#demo3',
	begintime:'2018-01-01 12:12:12',
	format:'yyyy-MM-dd HH:mm:ss',
	showtime:true
})</code></pre></div>
		</div>
		<div class="demo">
			<span class="t1">选择年:</span>
			<input id="demo4" type="text" class="input" placeholder="yyyy">
<span class="button">代码</span>
<div class="every-code"><pre><code class="language-js">zaneDate({
	elem:'#demo4',
	type:'year'
})</code></pre></div>
		</div>
		</div>
		<div class="line">
		<div class="demo">
			<span class="t1">选择月:</span>
			<input id="demo5" type="text" class="input" placeholder="mm">
<span class="button">代码</span>
<div class="every-code"><pre><code class="language-js">zaneDate({
	elem:'#demo5',
	type:'month'
})</code></pre></div>
		</div>
		<div class="demo">
			<span class="t1">选择时间:</span>
			<input id="demo6" type="text" class="input" placeholder="HH:mm:ss">
<span class="button">代码</span>
<div class="every-code"><pre><code class="language-js">zaneDate({
	elem:'#demo6',
	type:'time'
})</code></pre></div>
		</div>
		</div>
		<div class="line">
		<div class="demo">
			<span class="t1">选择时间(只选择时和分):</span>
			<input id="demo56" type="text" class="input" placeholder="HH:mm">
<span class="button">代码</span>
<div class="every-code"><pre><code class="language-js">zaneDate({
	elem:'#demo56',
	type:'time',
	showsecond:false,
})</code></pre></div>
		</div>
		<div class="demo">
			<span class="t1">改变宽度:</span><input id="demo7" type="text" class="input" placeholder="350">
<span class="button">代码</span>
<div class="every-code"><pre><code class="language-js">zaneDate({
	elem:'#demo7',
	width:350,
})</code></pre></div>
		</div>
		</div>
		<div class="line">
		<div class="demo">
			<span class="t1">格式化:</span><input id="demo8" type="text" class="input" placeholder="yyyy年MM月dd日 HH时mm分ss秒">
<span class="button">代码</span>
<div class="every-code"><pre><code class="language-js">zaneDate({
	elem:'#demo8',
	format:'yyyy年MM月dd日 HH时mm分ss秒',
	showtime:true
})</code></pre></div>
		</div>
		<div class="demo">
			<span class="t1">初始默认值:</span><input id="demo9" type="text" class="input" placeholder="2018-01-01">
<span class="button">代码</span>
<div class="every-code"><pre><code class="language-js">zaneDate({
	elem:'#demo9',
	begintime:'2018-01-01',
})</code></pre></div>
		</div>
		</div>
		<div class="line">
		<div class="demo">
			<span class="t1">时间范围min,max:</span><input id="demo10" type="text" class="input" placeholder="2018/06/01 - 2019/01/01">
<span class="button">代码</span>
<div class="every-code"><pre><code class="language-js">zaneDate({
	elem:'#demo10',
	min:'2018-06-01',
	max:'2019-01-01'
})</code></pre></div>
		</div>
		<div class="demo">
			<span class="t1">不显示时分秒:</span><input id="demo11" type="text" class="input" placeholder="yyyy-MM-dd">
<span class="button">代码</span>
<div class="every-code"><pre><code class="language-js">zaneDate({
	elem:'#demo11',
	showtime:false
})</code></pre></div>
		</div>
		</div>
		<div class="line">
		<div class="demo">
			<span class="t1">不显示清除按钮:</span><input id="demo12" type="text" class="input" placeholder="yyyy-MM-dd">
<span class="button">代码</span>
<div class="every-code"><pre><code class="language-js">zaneDate({
	elem:'#demo12',
	showclean:false
})</code></pre></div>
		</div>
		<div class="demo">
			<span class="t1">不显示今天按钮:</span><input id="demo13" type="text" class="input" placeholder="yyyy-MM-dd">
<span class="button">代码</span>
<div class="every-code"><pre><code class="language-js">zaneDate({
	elem:'#demo13',
	shownow:false
})</code></pre></div>
		</div>
		</div>
		<div class="line">
		<div class="demo">
			<span class="t1">不显示确定按钮:</span><input id="demo14" type="text" class="input" placeholder="yyyy-MM-dd">
<span class="button">代码</span>
<div class="every-code"><pre><code class="language-js">zaneDate({
	elem:'#demo14',
	showsubmit:false
})</code></pre></div>
		</div>
		<div class="demo">
			<span class="t1">不显所有按钮:</span><input id="demo15" type="text" class="input" placeholder="yyyy-MM-dd">
<span class="button">代码</span>
<div class="every-code"><pre><code class="language-js">zaneDate({
	elem:'#demo15',
	format:'yyyy-MM-dd',
	showtime:false,
	haveBotBtns:false
})</code></pre></div>
		</div>
		</div>
		<div class="line">
		<div class="demo">
			<span class="t1">初始化回调:</span><input id="demo16" type="text" class="input" placeholder="yyyy-MM-dd">
<span class="button">代码</span>
<div class="every-code"><pre><code class="language-js">zaneDate({
	elem:'#demo16',
	mounted:function(){
		document.getElementById('demo16').value="初始化完成！"
	}
})</code></pre></div>
		</div>
		<div class="demo">
			<span class="t1">改变值回调:</span><input id="demo17" type="text" class="input" placeholder="yyyy-MM-dd">
<span class="button">代码</span>
<div class="every-code"><pre><code class="language-js">zaneDate({
	elem:'#demo17',
	change:function(fulltime,begintime,endtime){
		alert('fulltime:'+fulltime+'\r\nbegintime:'+begintime+'\r\nendtime:'+endtime)
	}
})</code></pre></div>
		</div>
	</div>
	<div class="line">
		<div class="demo">
			<span class="t1">完成回调:</span><input id="demo18" type="text" class="input" placeholder="yyyy-MM-dd">
<span class="button">代码</span>
<div class="every-code"><pre><code class="language-js">zaneDate({
	elem:'#demo18',
	done:function(fulltime,begintime,endtime){
		alert('fulltime:'+fulltime+'\r\nbegintime:'+begintime+'\r\nendtime:'+endtime)
	}
})</code></pre></div>
		</div>
		<div class="demo">
			<span class="t1">double完成回调:</span><input id="demo27" type="text" class="input" placeholder="yyyy-MM-dd">
<span class="button">代码</span>
<div class="every-code"><pre><code class="language-js">zaneDate({
	elem:'#demo27',
	type:'doubleday',
	done:function(fulltime,begintime,endtime){
		alert('fulltime:'+fulltime+'\r\nbegintime:'+begintime+'\r\nendtime:'+endtime)
	}
})</code></pre></div>
		</div>
	</div>
	<div class="line">
		<div class="demo">
			<span class="t1">z-index值:</span>
			<input id="demo26" type="text" class="input" placeholder="zindex:500">
<span class="button">代码</span>
<div class="every-code"><pre><code class="language-js">zaneDate({
	elem:'#demo26',
	zindex:500
})</code></pre></div>
		</div>
		</div>
		<div class="english h2">双选择器案例</div>
		<div class="line">
		<div class="demo">
			<span class="t1">doubleday:</span>
			<input id="demo21" type="text" class="input" placeholder="HH:mm:ss">
<span class="button">代码</span>
<div class="every-code"><pre><code class="language-js">zaneDate({
	elem:'#demo21',
	begintime:'2017-10-15',
	endtime:'2017-10-25',
	type:'doubleday',
})</code></pre></div>
		</div>
		<div class="demo">
			<span class="t1">doubleyear:</span>
			<input id="demo22" type="text" class="input" placeholder="HH:mm:ss">
<span class="button">代码</span>
<div class="every-code"><pre><code class="language-js">zaneDate({
	elem:'#demo22',
	begintime:'2020',
	endtime:'2025',
	type:'doubleyear',
})</code></pre></div>
		</div>
	</div>
	<div class="line">
		<div class="demo">
			<span class="t1">doublemonth:</span>
			<input id="demo23" type="text" class="input" placeholder="HH:mm:ss">
<span class="button">代码</span>
<div class="every-code"><pre><code class="language-js">zaneDate({
	elem:'#demo23',
	begintime:'2',
	endtime:'5',
	type:'doublemonth',
})</code></pre></div>
		</div>
		<div class="demo">
			<span class="t1">doubletime:</span>
			<input id="demo24" type="text" class="input" placeholder="HH:mm:ss">
<span class="button">代码</span>
<div class="every-code"><pre><code class="language-js">zaneDate({
	elem:'#demo24',
	begintime:'12:10:10',
	endtime:'15:16:16',
	type:'doubletime',
})</code></pre></div>
		</div>
	</div>	
	<div class="line">
		<div class="demo">
			<span class="t1">doubleday支持时分秒:</span>
			<input id="demo25" type="text" class="input" placeholder="HH:mm:ss">
<span class="button">代码</span>
<div class="every-code"><pre><code class="language-js">zaneDate({
	elem:'#demo25',
	format:'yyyy-MM-dd HH:mm:ss',
	type:'doubleday',
	begintime:'2017-09-20 12:10:10',
	endtime:'2017-10-01 15:16:16',
	showtime:true
})</code></pre></div>
		</div>
		<div class="demo">
			<span class="t1">doubletime 只选择时分:</span>
			<input id="demo66" type="text" class="input" placeholder="HH:mm:ss">
<span class="button">代码</span>
<div class="every-code"><pre><code class="language-js">zaneDate({
	elem:'#demo24',
	begintime:'12:10',
	endtime:'15:16',
	type:'doubletime',
	showsecond:false
})</code></pre></div>
		</div>
	</div>	
		<div class="english h2">英文版本案例</div>
		<div class="line">
		<div class="demo">
			<span class="t1">完整版:</span>
			<input id="demo30" type="text" class="input" placeholder="yyyy-MM-dd HH:mm:ss">
			<span class="button">代码</span>
<div class="every-code"><pre><code class="language-js">zaneDate({
	elem:'#demo30',
	lang:'cn',
	begintime:'2018-01-01 12:12:12',
	format:'yyyy-MM-dd HH:mm:ss',
	showtime:true
})</code></pre></div>
		</div>	
		<div class="demo">
			<span class="t1">doubleday支持时分秒:</span>
			<input id="demo31" type="text" class="input" placeholder="HH:mm:ss">
<span class="button">代码</span>
<div class="every-code"><pre><code class="language-js">zaneDate({
	elem:'#demo31',
	lang:'en',
	format:'yyyy-MM-dd HH:mm:ss',
	type:'doubleday',
	begintime:'2017-09-20 12:10:10',
	endtime:'2017-10-01 15:16:16',
	showtime:true,
	done:function(fulltime,begintime,endtime){
		alert('fulltime:'+fulltime+'\r\nbegintime:'+begintime+'\r\nendtime:'+endtime)
	}
})</code></pre></div>
		</div>
	</div>
	</div>

	<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
	<script src="https://cdn.bootcss.com/prism/1.9.0/prism.min.js"></script>
	<script>
		zaneDate({
			elem:'#demo30',
			lang:'en',
			begintime:'2018-01-01 12:12:12',
			format:'yyyy-MM-dd HH:mm:ss',
			showtime:true
		})
		zaneDate({
			elem:'#demo31',
			lang:'en',
			format:'yyyy-MM-dd HH:mm:ss',
			type:'doubleday',
			begintime:'2017-09-20 12:10:10',
			endtime:'2017-10-01 15:16:16',
			showtime:true,
			done:function(fulltime,begintime,endtime){
				alert('fulltime:'+fulltime+'\r\nbegintime:'+begintime+'\r\nendtime:'+endtime)
			}
		})
		zaneDate({
			elem:'#demo28',
			type:'doubleday',
			format:'yyyy-MM-dd HH:mm:ss',
			showtime:true,
			zindex:50000
		})
		zaneDate({
			elem:'#demo29',
			zindex:50000
		})
		zaneDate({
			elem:'#demo3',
			begintime:1514779932000,
			format:'yyyy-MM-dd HH:mm:ss',
			showtime:true
		})
		zaneDate({
			elem:'#demo4',
			type:'year'
		})
		zaneDate({
			elem:'#demo5',
			type:'month'
		})
		zaneDate({
			elem:'#demo6',
			type:'time'
		})
		zaneDate({
			elem:'#demo56',
			type:'time',
			showsecond:false
		})
		zaneDate({
			elem:'#demo7',
			width:350,
		})
		zaneDate({
			elem:'#demo8',
			format:'yyyy年MM月dd日 HH时mm分ss秒',
			showtime:true
		})
		zaneDate({
			elem:'#demo9',
			begintime:'2018-01-01',
		})
		zaneDate({
			elem:'#demo10',
			min:'2018-06-01',
			max:'2019-01-01'
		})
		zaneDate({
			elem:'#demo11',
			showtime:false
		})
		zaneDate({
			elem:'#demo12',
			showclean:false
		})
		zaneDate({
			elem:'#demo13',
			shownow:false
		})
		zaneDate({
			elem:'#demo14',
			showsubmit:false
		})
		zaneDate({
			elem:'#demo15',
			format:'yyyy-MM-dd',
			showtime:false,
			haveBotBtns:false
		})
		zaneDate({
			elem:'#demo16',
			mounted:function(){
				document.getElementById('demo16').placeholder="初始化完成！"
			}
		})
		zaneDate({
			elem:'#demo17',
			change:function(fulltime,begintime,endtime){
				alert('fulltime:'+fulltime+'\r\nbegintime:'+begintime+'\r\nendtime:'+endtime)
			}
		})
		zaneDate({
			elem:'#demo18',
			done:function(fulltime,begintime,endtime){
				alert('fulltime:'+fulltime+'\r\nbegintime:'+begintime+'\r\nendtime:'+endtime)
			}
		})
		zaneDate({
			elem:'#demo27',
			type:'doubleday',
			done:function(fulltime,begintime,endtime){
				alert('fulltime:'+fulltime+'\r\nbegintime:'+begintime+'\r\nendtime:'+endtime)
			}
		})
		zaneDate({
			elem:'#demo19',
			showtime:false,
			begintime:'2018-01-01',
		})
		zaneDate({
			elem:'#demo20',
			showtime:false,
		})
		zaneDate({
			elem:'#demo21',
			begintime:'2017-10-15',
			endtime:'2017-10-25',
			type:'doubleday',
		})
		zaneDate({
			elem:'#demo22',
			begintime:'2020',
			endtime:'2025',
			type:'doubleyear',
		})
		zaneDate({
			elem:'#demo23',
			begintime:'2',
			endtime:'5',
			type:'doublemonth',
		})
		zaneDate({
			elem:'#demo24',
			begintime:'12:10:10',
			endtime:'15:16:16',
			type:'doubletime',
		})
		zaneDate({
			elem:'#demo66',
			begintime:'12:10',
			endtime:'15:16',
			type:'doubletime',
			showsecond:false
		})
		zaneDate({
			elem:'#demo25',
			format:'yyyy/MM/dd HH:mm:ss',
			type:'doubleday',
			begintime:'2017/09/20 12:10:10',
			endtime:'2017/10/01 15:16:16',
			showtime:true
		})
		zaneDate({
			elem:'#demo26',
			zindex:500
		})
	</script>
	<script type="text/javascript">
		$(function(){
			$('span.button').click(function(){
				$(this).siblings('.every-code').slideToggle();
			})
			$('div.button-zane').click(function(){
				$('div.position_flexd').show()
			})
		})
		function closeModel(){
			let closeModels = document.querySelector('#open_model');
			closeModels.style.display = 'none'
		}
	</script>
</body>
</html>